import { Fragment, defineComponent, reactive } from 'vue';
import { routePage, wrap, point, pointWrap, icon, list, dataWrap, data, icon2, content, name, desc, action, tips } from './Route.module.scss';
import { map, marker, navi, poi } from '@/store';
import { PoiInfo } from '@/utils/type';
import { routeInputObj } from '../routeInput/RouteInput';
import { pathObj } from '../path/Path';
import { closeToast, showLoadingToast } from 'vant';

/*
---文件
*/

export const routeObj = reactive({
    startPointFlag: true,//判断是否更新起点
})

export default defineComponent({
    name: 'Route',
    data() {
        return {
            imgArray: {
                start: this.$cosUrl + "route/assets/img/location-start.png",
                end: this.$cosUrl + "route/assets/img/location-end.png",
                choice: this.$cosUrl + "route/assets/img/choice.png",
                location: this.$cosUrl + "route/assets/img/icon-location.png"
            },
        };
    },
    methods: {
        setStartPoint(fid: number | string, index: number) {
            //判断起点和终点一致
            if (fid == poi.end.fid) {
                alert("起点和终点不能相同！请重新选择");
                return;
            }
            if (routeObj.startPointFlag) {
                //我的位置
                if (fid == '999') {
                    poi.start = poi.now;
                    routeInputObj.startVal = poi.start.poiName;
                } else {
                    poi.start = poi.poiList[index];
                    routeInputObj.startVal = poi.poiList[index].poiName + "(自选起点)";
                }
            } else {
                if (fid == '999') {
                    poi.end = poi.now;
                    routeInputObj.endVal = poi.end.poiName;
                } else {
                    poi.end = poi.poiList[index];
                    routeInputObj.endVal = poi.poiList[index].poiName + "(自选起点)";
                }
            }
            // 导航准备，检验起点终点是否合格
            if (navi.verifyRoutePois()) {
                showLoadingToast({
                    message: '路线规划中',
                    forbidClick: true,
                    duration: 0,
                });
                //规划路线并显示
                navi.startRoute();
                closeToast();
            }
        },
        setMapPoint(type: "end" | "start") {
            poi.type = type;
            poi.infoType = "choice";
            localStorage.setItem("startPoi", JSON.stringify(poi.start));
            localStorage.setItem("endPoi", JSON.stringify(poi.end));
            map.routeFlag = false;
            map.routeInputFlag = false;
            map.pathFlag = false;
            map.choiceFlag = false;
            marker.removeImageMarker();
            navi.resetNavigation();
        },
    },
    render() {
        const { poiList } = poi;
        return <Fragment>
            <div class={routePage} v-show={map.routeFlag}>
                <div class={wrap}>
                    {/* 选点 */}
                    <div class={point}>
                        <div class={`now ${pointWrap}`} onClick={() => this.setStartPoint('999', 999)}>
                            <img class={icon} src={this.imgArray.choice} alt="" />
                            <span class={location}>我的位置</span>
                        </div>

                        {routeObj.startPointFlag ? <div
                            class={`start ${pointWrap}`}
                            onClick={() => this.setMapPoint('start')}
                        >
                            <img class={icon} src={this.imgArray.start} alt="" />
                            <span class={location}> 地图点选</span>
                        </div> : <div class={`end ${pointWrap}`} onClick={() => this.setMapPoint('end')}>
                            <img class={icon} src={this.imgArray.end} alt="" />
                            <span class={location}>地图点选</span>
                        </div>}
                    </div>

                    {/* 搜索列表 */}
                    <div class={list}>
                        {poiList.length>0 ? <div class={dataWrap}>
                            {poiList.map((item: PoiInfo, index) => {
                                return <div class={data}>
                                    <img class={icon2} src={this.imgArray.location} alt="" />
                                    <div class={content}>
                                        <div class={name}>{item.poiName}</div>
                                        <div class={desc}>{item.poiIntro}</div>
                                    </div>
                                    <span class={`${action} flex-center`} onClick={() => this.setStartPoint(item.fid, index)} >选择</span>
                                </div>
                            })}
                        </div> : <span class={tips}>没有搜索出结果</span>}
                    </div>
                </div >
            </div >
        </Fragment >;
    },
});